import './index.scss';
// import { Value2nameFilter as value2name} from 'vux';
import Selector from 'vux/src/components/selector/index.vue'
import Group from 'vux/src/components/group/index.vue'
import XAddress from 'vux/src/components/x-address/index.vue'
import XInput from 'vux/src/components/x-input/index.vue'
import ChinaAddressV2Data from 'vux/src/datas/china_address_v2.json'
import XTextarea from 'vux/src/components/x-textarea/index.vue'
import Confirm from 'vux/src/components/confirm/index.vue'
// import {Value2nameFilter as value2name} from 'vux/src/filters/value2name'
import value2name from 'vux/src/filters/value2name'
import CONSTANT from '@/common/constants.js';
import http from '@/common/http.js';
export default {
  name: 'clue',
  components: {
    Group,
    XAddress,
    XInput,
    Selector,
    XTextarea,
    Confirm
  },
  data () {
    return {
      heightT: 150,
      geren: true,
      qiuzhuren: false,
      imageShow: false,
      hideDistric: true,
      addressData: ChinaAddressV2Data,
      valueD: ['浙江省', '杭州市', '上城区'],
      imageHttp: 'http://www.qqchou.org/a/wxinterface/file/upload',
      textLength: 0,
      list: {
        user_id: '',
        helpName: '',
        idCard: '',
        province: '浙江省',
        city: '杭州市',
        country: '上城区',
        address: '',
        mobile: '',
        bankId: '',
        bankName: '',
        bankFrom: '',
        organization: '',
        content: '',
        // idCardUrl: {zhengmian: '', fanmian: ''},
        // idCardUrl: {zhengmian: '', fanmian: ''},
        idCardUrlz: '',
        idCardUrlf: '',
        poolUrl: '',
        hospitalUrl: '',
        nowPic: '',
        otherPic: ''
      },
      demoa: '',
      listop: [],
      sfzyanzhen: function (value) {
        let r = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (r.test(value)) {
          return {
            valid: true,
            msg: '身份证正确'
          }
        } else {
          return {
            valid: false,
            msg: '身份证错误'
          }
        }
      }
    }
  },
  mounted () {
    this.list.user_id = window.sessionStorage.getItem('userId')
    if (this.$emit('ifOpenid')) {
      this.$emit('ifOpenid', this.$route.path)
    }
  },
  methods: {
    handleAvatarSuccessz (res, file) {
      // 身份证正面
      this.list.idCardUrlz = res.url;
    },
    handleAvatarSuccessf (res, file) {
      // 身份证反面
      this.list.idCardUrlf = res.url;
    },
    handleAvatarSuccessp (res, file) {
      // 贫困证明
      this.list.poolUrl = res.url;
    },
    handleAvatarSuccessy (res, file) {
      // 医院诊断证明
      this.list.hospitalUrl = res.url;
    },
    handleAvatarSuccessx (res, file) {
      // 求助人现照
      this.list.nowPic = res.url;
    },
    handleAvatarSuccessq (res, file) {
      // 其他照片
      this.list.otherPic = res.url;
    },
    beforeAvatarUpload (file) {
      var isJPEG = file.type === 'image/jpeg'
      var isPNG = file.type === 'image/png'
      var isGIF = file.type === 'image/gif'
      var isJPG = file.type === 'image/jpg'
      var isLt10M = file.size / 1024 / 1024 < 10
      if (!isJPEG && !isPNG && !isGIF && !isJPG) {
        alert('上传图片只能是 JPEG,PNG,GIF,JPG 格式!')
        // this.$refs.percentage.style.display = 'none'
        // this.$refs.upload.style.display = 'block'
        return false
      }
      if (!isLt10M) {
        alert('上传图片大小不能超过 10MB!')
        // this.$refs.percentage.style.display = 'none'
        // this.$refs.upload.style.display = 'block'
        return false
      }
    },
    handleAvatarError () {
      alert('上传失败,请重新上传！')
    },
    handleAvatarPorgress () {
      console.log('正在上传')
    },
    firstPage () {
      // 第一页的下一页按钮事件
      let valueChange = this.getName(this.valueD);
      let arr = valueChange.split(' ');
      this.list.province = arr[0];
      this.list.city = arr[1];
      this.list.country = arr[2];
      if (this.list.helpName == '') {
        alert('请输入您的姓名！')
      } else if (this.list.idCard == '') {
        alert('请输入您的身份证号码！')
      } else if (this.$refs.sfz.valid == false) {
        alert('请输入正确的身份证号码！')
      } else if (this.list.province == '') {
        alert('请选择所在位置！')
      } else if (this.list.address == '') {
        alert('请输入您的具体位置！')
      } else if (this.list.mobile == '') {
        alert('请输入您的手机号！')
      } else if (this.$refs.mobile.valid == false) {
        alert('请输入正确的手机号！')
      } else {
        http.post(CONSTANT.CITY_ORGANIZE, {city: this.list.city, country: this.list.country}, (res) => {
          // 获取求助的组织
          // console.log(res)
          if (res.code == 200) {
            this.listop = res.list
            let str = []
            for (let i = 0; i < this.listop.length; i++) {
              str.push(this.listop[i].organizationName)
            }
            this.listop = str
            // console.log(this.listop)
          } else {
            console.log(res.errmsg)
          }
        })
        this.geren = false;
        this.qiuzhuren = true;
      }
    },
    secondPage () {
      // 第二页的下一页按钮事件
      if (this.list.bankId == '') {
        alert('请输入银行卡账号！')
      } else if (this.list.bankName == '') {
        alert('请输入银行卡账户名称！')
      } else if (this.list.bankFrom == '') {
        alert('请输入开户的银行名称！')
      } else if (this.list.organization == '') {
        alert('请选择组织名称！')
      } else if (this.list.content == '') {
        alert('请输入求助的内容！')
      } else if (this.textLength < 50) {
        alert('请输入最少50字的求助内容！')
      } else {
        this.qiuzhuren = false;
        this.imageShow = true;
      }
    },
    submit () {
      if (this.list.idCardUrlz == '') {
        alert('请上传身份证正面照！')
      } else if (this.list.idCardUrlf == '') {
        alert('请上传身份证反面照！')
      } else {
        http.post(CONSTANT.SEEK_HELP, this.list, (res) => {
          if (res.code == 200) {
            alert('提交成功！')
            this.geren = true;
            this.qiuzhuren = false;
            this.imageShow = false;
            this.valueD = ['浙江省', '杭州市', '上城区']
            this.list.helpName = '';
            this.list.idCard = '';
            this.list.province = '浙江省';
            this.list.city = '杭州市';
            this.list.country = '上城区';
            this.list.address = '';
            this.list.mobile = '';
            this.list.bankId = '';
            this.list.bankName = '';
            this.list.bankFrom = '';
            this.list.organization = '';
            this.list.content = '';
            this.list.idCardUrlz = '';
            this.list.idCardUrlf = '';
            this.list.poolUrl = '';
            this.list.hospitalUrl = '';
            this.list.nowPic = '';
            this.list.otherPic = '';
            window.history.go(-1)
          }
        })
      }
    },
    getName (value) {
      return value2name(value, ChinaAddressV2Data)
    },
    howTextLen (val) {
      console.log(val.length)
      var _this = this
      _this.textLength = val.length
    },
    comeBack () {
      if (this.qiuzhuren == true) {
        this.geren = true;
        this.qiuzhuren = false;
      } else if (this.imageShow == true) {
        this.qiuzhuren = true;
        this.imageShow = false;
      } else {
        window.history.back()
      }
    }
  }
}
